<template>
  <view class="paged-editor-wrapper" v-if="visible">
    <van-nav-bar left-arrow :border="false" :title="props.navTitle" @click-left="handleBack" />
    
    <view class="editor-form-field">
      <view class="form-title" v-if="props.formTitle && props.formTitle !== ''">{{ props.formTitle }}</view>
      <view class="form-description" v-if="props.formDescription && props.formDescription !== ''">{{ props.formDescription }}</view>
      <view class="form-input">
        <van-field v-if="props.formType === 'textarea'"
          v-model="state.value"
          rows="6"
          autosize
          label=""
          type="textarea"
          maxlength="200"
          placeholder="请输入"
          show-word-limit
          class="in-editor-page"
        />
        
        <van-field v-if="props.formType === 'input'"
          v-model="state.value"
          label=""
          placeholder="请输入"
          clearable
          input-align="center"
          class="in-editor-page input"
        />
      </view>
      <view class="save-button" @click="handleSave">保存</view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, reactive, watch } from 'vue';

const state = reactive({
  value: ''
})

const props = defineProps({
  //导航栏标题
  navTitle: {
    type: String,
    default: ''
  },
  //是否可见
  visible: {
    type: Boolean,
    default: false
  },
  //表单属性名
  formKey: {
    type: String,
    default: ''
  },
  //表单值
  formValue: {
    type: String,
    default: ''
  },
  //标题
  formTitle: {
    type: String,
    default: ''
  },
  //描述
  formDescription: {
    type: String,
    default: ''
  },
  //表单类型 单行input 和 多行textarea
  formType: {
    type: String,
    default: 'input'
  }
})

watch(props, (n, o) => {
  const body = document.querySelector('body');
  if (n.visible === true) {
    body.style.height = '100vh';
    body.style.overflow = 'hidden';
    state.value = n.formValue; //赋值
  } else {
    body.style.height = '100%';
    body.style.overflow = null;
    state.value = '';
  }
})

const emit = defineEmits(['onSave', 'onBack'])

function handleBack() {
  emit('onBack');
}

function handleSave() {
  let args = {
    key: props.formKey,
    value: state.value
  }
  emit('onSave', args);
}

</script>

<style lang="scss" scoped>
.paged-editor-wrapper {
  position: fixed;
  height: 100%;
  width: 100%;
  top:0;
  position: fixed;
  z-index: 9999;
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  
  .editor-form-field {
    height: 100%;
    margin-top: 48rpx;
    padding: 0 30rpx;
    display: flex;
    flex-direction: column;
    
    .form-title {
      padding: 0 38rpx;
      color: rgba(38, 38, 38, 1);
      font-size: 48rpx;
      margin-bottom: 12rpx;
      line-height: 68rpx;
    }
    .form-description {
      padding: 0 38rpx;
      color: rgba(102, 102, 102, 1);
      font-size: 28rpx;
      margin-bottom: 44rpx;
      line-height: 40rpx;
    }
    .save-button {
      height: 100rpx;
      background-color: rgba(38, 38, 38, 1);
      font-size: 36rpx;
      color: rgba(255, 255, 255, 1);
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      position: absolute;
      bottom: 0;
      width: calc(100vw - 60rpx);
      bottom: 40rpx;
    }
    
    .form-input {
      position: relative;
      ::v-deep.in-editor-page {
        &.van-cell {
          padding: 0 38rpx;
          .van-field__value {
            .van-field__body {
              .van-field__control {
                padding: 24rpx 28rpx;
                background-color: rgba(238, 238, 238, 1);
                border-radius: 8rpx;
                color: rgba(38, 38, 38, 1);
                line-height: 40rpx;
                font-size: 28rpx;
              }
            }
          }
          &:after {
            border-bottom-color: transparent;
          }
        }
      }
      ::v-deep.in-editor-page {
        &.input {
          .van-field__value {
            .van-field__body {
              background-color: rgba(247, 248, 249, 1) !important;
              padding: 0 20rpx;
              .van-field__control {
                background-color: transparent !important;
              }
            }
          }
        }
      }
    }
  }
}
</style>